<template>
  <div>
    <h1>list</h1>
    <button @click="taskMove">移动到已经完成列表</button>
    <div class="task-wrapper">
      <div class="task-list-item">
        <template v-for="item in list">
          <TaskItem :item="item" :key="item.id" @onChange="onChange"></TaskItem>
        </template>
        <AddTaskItem @onCreateTask="onCreateTask"></AddTaskItem>
      </div>

      <div class="task-list-item">
        <template v-for="item in list.filter((v) => v.check)">
          <TaskItem :item="item" :key="item.id"></TaskItem>
        </template>
        <AddTaskItem @onCreateTask="onCreateTask"></AddTaskItem>
      </div>
    </div>
  </div>
</template>

<script>
import AddTaskItem from './components/add-tast-item.vue'
import TaskItem from './components/tast-item.vue'
export default {
  data() {
    return {
      finishList: [],
      list: [
        {
          id: Date.now() + 1,
          value: this.value,
          priority: this.priorityIndex,
          createTime: new Date(),
          deadlineTime: Date.now() + '两个小时的时间戳',
          check: false,
        },
        {
          id: Date.now() + 2,
          value: this.value,
          priority: this.priorityIndex,
          createTime: new Date(),
          deadlineTime: Date.now() + '两个小时的时间戳',
          check: false,
        },
        {
          id: Date.now() + 3,
          value: this.value,
          priority: this.priorityIndex,
          createTime: new Date(),
          deadlineTime: Date.now() + '两个小时的时间戳',
          check: false,
        },
      ],
    }
  },
  components: {
    AddTaskItem,
    TaskItem,
  },
  methods: {
    onCreateTask(item) {
      this.list.push(item)
    },
    onChange(item) {
      console.log(this.list, 'list------')
    },
    taskMove() {
      // this.finishList = this.list.filter((v) => v.check)
    },
  },
}
</script>

<style>
.task-wrapper {
  display: flex;
}
</style>
